<template>
  <div class="app-container">
    <CustomForm
      class="search-form"
      :form-data="formData"
      :submit-event="submitEvent"
      :form-items="searchItem"
      :reset-event="resetEvent"
      @collapse="collapseEvent"
    >
      <template #artcleName="{ data, items }">
        <vxe-input
          :size="items.size"
          :style="{ width: items.width }"
          :placeholder="items.placeholder"
          v-model="data.artcle_name"
        ></vxe-input>
      </template>
      <template #numName="{ data, items }">
        <vxe-input
          :size="items.size"
          :style="{ width: items.width }"
          :placeholder="items.placeholder"
          v-model="data.num_name"
        ></vxe-input>
      </template>
    </CustomForm>

    <CustomElTable
      id="ordersTable"
      class="my-table"
      :height="tableHeight"
      :config="tableConfig"
      :is-show-pager="tableData.length > 0"
      :data="tableData"
      @row-click="handleRowClick"
      @selection-change="selectionChange"
      @handel-edit-click="handelEditClick"
      @handle-delete-click="handleDeleteClick"
      @page-change="handleCurrentChange"
    >
      <template #inputEdit="{ row }">
        <el-input v-model="row.inputValue" @click.stop placeholder="please input" size="small"></el-input>
      </template>
      <template #artcleName="{ row }">
        <el-tag v-for="item in row.artcleName" :key="item.id" size="small">
          {{ item.name }}
        </el-tag>
      </template>
    </CustomElTable>
  </div>
</template>

<script setup>
import { ref } from 'vue'
import searchItem from './config'
import { useTableHeight } from '@/hooks/useTableHeight'
const { tableHeight, calculateTableHeight } = useTableHeight('.app-container', '.search-form', 100)

defineOptions({
  // 命名当前组件
  name: 'ElementPlus'
})

const formData = reactive({
  date: '',
  type_key: '',
  artcle_name: '',
  num_name: '',
  supplier_trading_name_like: '',
  supplier_name_like: '',
  abn_like: '',
  supplier_code_like: '',
  phone_like: '',
  email_address_like: '',
  category_like: '',
  a_like: '',
  b_like: '',
  c_like: '',
  d_like: ''
})

// 表格数据
const tableData = ref([])

// 随机生成数据
const generateRandomData = () => {
  const categories = ['Technology', 'Health', 'Finance', 'Education', 'Entertainment']
  const admins = ['Alice', 'Bob', 'Charlie', 'David', 'Eve']
  const keywords = ['Vue', 'React', 'Angular', 'JavaScript', 'TypeScript']
  const titles = ['Introduction to Vue', 'Advanced React', 'Angular Essentials', 'JS Basics', 'TypeScript Deep Dive']

  for (let i = 0; i < 30; i++) {
    tableData.value.push({
      id: i + 1,
      text: keywords[Math.floor(Math.random() * keywords.length)],
      title: titles[Math.floor(Math.random() * titles.length)],
      category: categories[Math.floor(Math.random() * categories.length)],
      admin: admins[Math.floor(Math.random() * admins.length)],
      inputValue: '', // 自定义输入字段，初始为空
      artcleName: [
        { id: 1, name: 'Article A' },
        { id: 2, name: 'Article B' }
      ].slice(0, Math.floor(Math.random() * 2) + 1) // 随机选择1-2个文章名
    })
  }
}

generateRandomData()
// 表格配置
const tableConfig = reactive({
  //type 区分操作类型  normal:普通  handler:操作  custom:自定义插槽
  column: [
    { type: 'selection', width: 60 },
    {
      type: 'normal',
      prop: 'text',
      label: 'KeyWords'
    },
    { type: 'normal', prop: 'title', label: 'Title' },
    {
      type: 'normal',
      prop: 'category',
      label: 'Category'
    },
    {
      type: 'normal',
      prop: 'admin',
      label: 'Admin'
    },
    {
      type: 'handler',
      label: 'Controls',
      width: 80,
      btns: [
        {
          label: 'Edit',
          click: 'handelEditClick',
          icon: 'Edit',
          type: 'primary'
        },
        {
          label: 'Delete',
          click: 'handleDeleteClick',
          icon: 'Delete',
          type: 'danger'
        }
      ]
    },
    {
      type: 'custom',
      label: 'Input',
      prop: 'inputValue',
      slotName: 'inputEdit'
    },
    {
      type: 'custom',
      label: 'artcleName',
      prop: 'artcleName',
      slotName: 'artcleName'
    }
  ],
  paginationData: {
    pageSize: 20,
    currentPage: 1,
    total: 100
  }
})

// 事件处理
const handleRowClick = val => {
  console.log(val, '点击行')
}
const selectionChange = val => {
  console.log(val, '勾选')
}
const handelEditClick = row => {
  console.log(row, '编辑')
}

const handleDeleteClick = row => {
  console.log(row, '删除')
}
const handleCurrentChange = val => {
  tableConfig.paginationData.currentPage = val
  console.log(val, '当前页')
}
const resetEvent = () => {
  console.log('resetEvent')
  formData.date = ''
  formData.type_key = ''
  formData.artcle_name = ''
  formData.num_name = ''
  formData.supplier_trading_name_like = ''
  formData.supplier_name_like = ''
  formData.abn_like = ''
  formData.supplier_code_like = ''
  formData.phone_like = ''
  formData.email_address_like = ''
  formData.category_like = ''

  formData.a_like = ''
  formData.b_like = ''
  formData.c_like = ''
  formData.d_like = ''
}

const submitEvent = () => {
  console.log('submitEvent')
  console.log('formData>>>→➡️➡️➡️', formData)
}
const collapseEvent = () => {
  calculateTableHeight()
}
</script>
